import { Tag, Avatar, Card, Col, List, Skeleton, Row, Statistic } from 'antd';
import React, { Component } from 'react';
import { Link, connect, history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import Radar from './components/Radar';
import EditableLinkGroup from './components/EditableLinkGroup';
import styles from './style.less';
import { getDefaultAvatarUrl } from '@/utils/default'
import { pageProjects } from '@/services/project/project'
import { parseDate } from '@/utils/dateUtils'

const links = [
  {
    title: '操作一',
    href: '',
  },
  {
    title: '操作二',
    href: '',
  },
  {
    title: '操作三',
    href: '',
  },
  {
    title: '操作四',
    href: '',
  },
  {
    title: '操作五',
    href: '',
  },
  {
    title: '操作六',
    href: '',
  },
];

const PageHeaderContent = ({ myInfo, enterpriseUser }) => {
  const loading = myInfo && Object.keys(myInfo).length && enterpriseUser;
  if (!loading || !enterpriseUser || !enterpriseUser) {
    return (
      <Skeleton
        avatar
        paragraph={{
          rows: 1,
        }}
        active
      />
    );
  }

  let department = "-";
  if (enterpriseUser.enterpriseDepartment) {
    department = enterpriseUser.enterpriseDepartment.name;
    let currentDepartment = enterpriseUser.enterpriseDepartment.parentDepartment;
    while (currentDepartment) {
      department = currentDepartment.name + '-' + department;
      currentDepartment = currentDepartment.parentDepartment;
    }
  }

  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        {myInfo.avatarUrl ? <Avatar size="large" src={myInfo.avatarUrl} /> :
          <Avatar size="large"
            alt="avatar"
            src={getDefaultAvatarUrl(myInfo.id)} >
          </Avatar>
        }
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          {/* 早安， */}
          {myInfo.nickname || myInfo.username}
          ，祝你开心每一天！
        </div>
        <div>
          <Tag color="green">{enterpriseUser.enterpriseRoleName}</Tag> | {department} | <Link to="/enterprise/detail">管理企业</Link>
        </div>
      </div>
    </div>
  );
};

const ExtraContent = () => (
  <div className={styles.extraContent}>
    <div className={styles.statItem}>
      <Statistic title="待办" value={2223} />
    </div>
    <div className={styles.statItem}>
      <Statistic title="bug数" value={2223} />
    </div>
    <div className={styles.statItem}>
      <Statistic title="当前项目" value={56} />
    </div>
  </div>
);

class Workplace extends Component {

  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    pageProjects({
      inStatus: 2
    }).then(result => {
      this.setState({
        ...this.state,
        projectList: result?.data.list || []
      });
    })
  }

  componentWillUnmount() {

  }

  renderActivities = (item) => {
    const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
      if (item[key]) {
        return (
          <a href={item[key].link} key={item[key].name}>
            {item[key].name}
          </a>
        );
      }

      return key;
    });
    return (
      <List.Item key={item.id}>
        <List.Item.Meta
          avatar={<Avatar src={item.user.avatar} />}
          title={
            <span>
              <a className={styles.username}>{item.user.name}</a>
              &nbsp;
              <span className={styles.event}>{events}</span>
            </span>
          }
          description={
            <span className={styles.datetime} title={item.updatedAt}>
              {parseDate(item.updatedAt).fromNow()}
            </span>
          }
        />
      </List.Item>
    );
  };

  render() {
    const {
      myInfo,
      enterpriseUser,
      projectLoading,
      activitiesLoading,
      radarData,
    } = this.props;

    const projectList = this.state.projectList || [];

    if (!myInfo || !myInfo.id) {
      return null;
    }

    return (
      <PageHeaderWrapper
      className={styles.header}
        content={<PageHeaderContent myInfo={myInfo} enterpriseUser={enterpriseUser} />}
        extraContent={<ExtraContent />}
      >
        <Row gutter={24}>
          <Col xl={16} lg={24} md={24} sm={24} xs={24}>
            <Card
              className={styles.projectList}
              style={{
                marginBottom: 24,
              }}
              title="进行中的项目"
              bordered={false}
              extra={<Link to="/projects">全部项目</Link>}
              loading={projectLoading}
              bodyStyle={{
                padding: 0,
              }}
            >
              {projectList.map((item) => (
                <Card.Grid className={styles.projectGrid} key={item.id}>
                  <Card
                    bodyStyle={{
                      padding: 0,
                    }}
                    bordered={false}
                  >
                    <Card.Meta
                      title={
                        <div className={styles.cardTitle}>
                          <Link to={`/projects/${item.id}/detail`}>{item.name}</Link>
                        </div>
                      }
                      description={item.description}
                    />
                    <div className={styles.projectItemContent}>
                      <Link to={item.memberLink}>{item.member || ''}</Link>
                      {item.createTime && (
                        <span className={styles.datetime} title={item.createTime}>
                          {item.createTime}创建
                        </span>
                      )}
                    </div>
                  </Card>
                </Card.Grid>
              ))}
            </Card>
            {/* <Card
                bodyStyle={{
                  padding: 0,
                }}
                bordered={false}
                className={styles.activeCard}
                title="动态"
                loading={activitiesLoading}
              >
                <List
                  loading={activitiesLoading}
                  renderItem={(item) => this.renderActivities(item)}
                  dataSource={activities}
                  className={styles.activitiesList}
                  size="large"
                />
              </Card> */}
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            {/* <Card
              style={{
                marginBottom: 24,
              }}
              title="快速开始 / 便捷导航"
              bordered={false}
              bodyStyle={{
                padding: 0,
              }}
            >
              <EditableLinkGroup onAdd={() => { }} links={links} linkElement={Link} />
            </Card> */}
            {/* <Card
              style={{
                marginBottom: 24,
              }}
              bordered={false}
              title="XX 指数"
              loading={radarData?.length === 0}
            >
              <div className={styles.chart}>
                <Radar hasLegend height={343} data={radarData} />
              </div>
            </Card> */}
            {/* <Card
              bodyStyle={{
                paddingTop: 12,
                paddingBottom: 12,
              }}
              bordered={false}
              title="团队"
              loading={projectLoading}
            >
              <div className={styles.members}>
                <Row gutter={48}>
                  {projectList.map((item) => (
                    <Col span={12} key={`members-item-${item.id}`}>
                      <Link to={item.href}>
                        <Avatar src={item.logo} size="small" />
                        <span className={styles.member}>{item.member}</span>
                      </Link>
                    </Col>
                  ))}
                </Row>
              </div>
            </Card> */}
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default connect(
  ({ loading, user, enterprise }) => ({
    myInfo: user.myInfo,
    enterpriseUser: enterprise.currentEnterprise,
  }),
)(Workplace);
